<template>
	<div class="systemStatePage">
    <el-header class="title">系统状态</el-header>
    <el-container class="pageContent">
        <system-resource-state title-name="CPU" :system-data="cpuSystemData" />
        <system-resource-state title-name="硬盘" :system-data="diskSystemData" />
        <system-resource-state title-name="内存" :system-data="ramSystemData" />
    </el-container>
    <el-footer>
      <div class="pageBut">
        <wj-Button type="save" @click="getSystemStatus">刷新</wj-Button>
        <span>最后数据刷新时间：{{ allEchart.time }}</span>
      </div>
    </el-footer>
	</div>
</template>
<script>
import { system_status } from "@/utils/request/api";
import SystemResourceState from "@/views/division/system/components/SystemResourceState.vue";
export default {
	name: "SystemState",
  components: {SystemResourceState},
	data() {
		return {
			// 保存三合一图表的数据
			allEchart: {
				time: "2023-05-15 12:16:55",
			},
      diskSystemData: {
        usedPercentage: 0,
        totalCapacity: 64,
        usedCapacity: 0,
        remainingCapacity: 0
      },
      cpuSystemData: {
        usedPercentage: 0,
        totalCapacity: 4,
        usedCapacity: 0,
        remainingCapacity: 0
      },
      ramSystemData: {
        usedPercentage: 0,
        totalCapacity: 8,
        usedCapacity: 0,
        remainingCapacity: 0
      }
		};
	},
	created() {},
	mounted() {
		this.getSystemStatus();
	},
	methods: {
		getSystemStatus() {
			system_status().then((res) => {
				console.log(res);
				if (res.code === 200) {
          this.cpuSystemData = res.data.cpuUsage;
          this.diskSystemData = res.data.diskUsage;
          this.ramSystemData = res.data.memoryUsage;
          this.allEchart.time = res.data.time;
				} else {
					this.$msg.error("系统状态获取失败！");
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
.systemStatePage {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
	.pageContent {
		margin-bottom: 12px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		align-content: space-between;
	}
	.pageBut {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		[class*="wj-button-"] {
			font-size: 14px;
			padding: 12px 18px;
			margin: 0 12px;
		}
		span {
			display: inline-block;
			line-height: 48px;
			font-size: 16px;
			margin: 0 0 0 12px;
		}
	}
  .title{
    line-height: 60px;
    font-size: 20px;
  }
}
</style>
